<!DOCTYPE html>
<html>

<head>
    <title>debounce Example</title>
    <script>
        // 防抖函数
        function debounce(func, delay) {
            let timeoutId;
            // 返回一个新的函数
            return function () {
                // 清除之前的定时器
                clearTimeout(timeoutId);
                const context = this
                // 创建一个新的定时器
                timeoutId = setTimeout(() => {
                    // 在延迟结束后调用原函数
                    // console.log(this, arguments)
                    func.apply(this, arguments);
                }, delay);
            };
        }

        // 原函数，我们希望在防抖之后进行调用
        function handleInput() {
            console.log("输入框内容发生了变化");
        }

        // 创建防抖函数
        const debouncedHandleInput = debounce(handleInput, 500);
    </script>
</head>

<body>
    <input type="text" oninput="debouncedHandleInput()" placeholder="输入框" />
</body>

</html>